<template>
  <div class="certification_page">
    <!-- 导航 开始 -->
    <nav-bar title="查询资质"></nav-bar>
    <!-- 导航 end -->

    <!-- 顶部 开始 -->
    <div class="top_info">
      <!-- 菜单 开始 -->
      <div class="menu_box">
        <tab-menus
          v-model="menuActive"
          :list="menus"
          class="cer_menu"
          @change="onChange"
        ></tab-menus>
      </div>
      <!-- 菜单 end -->

      <!-- 搜索框 开始 -->
      <div class="search_box">
        <img src="@/assets/images/inquire/search.png" class="img" alt="" />
        <div class="input_box">
          <input
            type="text"
            v-model="term"
            class="a_input"
            :placeholder="placeholder"
          />
        </div>
        <button class="btn" @click="goSearch">搜索</button>
      </div>
      <!-- 搜索框 end -->

      <!-- 热门搜索词 开始 -->
      <div class="hot_word">
        <span class="name">热门搜索词：</span>
        <span
          class="tag"
          v-for="(item, index) in hotList"
          :key="index"
          @click="chooseTerm(item)"
          >{{ item.name }}</span
        >
        <!-- <span class="tag">周艳泓</span>
        <span class="tag">王小明</span>
        <span class="tag">张三</span> -->
        <!-- <span class="tag">欧阳春晓</span> -->
      </div>
      <!-- 热门搜索词 end -->

      <!-- 分割线 开始 -->
      <div class="divider_line"></div>
      <!-- 分割线 end -->

      <!-- 说明 开始 -->
      <div class="desc_box">
        <p>说明：</p>
        <p>1、未查询到相关信息不代表其资质有问题，有可能是因为系统暂未收录；</p>
        <p>
          2、信息均来自网友上传或网络转载，其原创性和内容未经本站证实，仅供参考。
        </p>
      </div>
      <!-- 说明 end -->
    </div>
    <!-- 顶部 end -->

    <!-- 热门医院 开始 -->
    <div class="hot_list" v-show="menuActive == 1">
      <div class="head">热门医院</div>
      <div class="list_box">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :offset="30"
          @load="loadHospitalMore"
        >
          <SearchHospital
            class="cell"
            v-for="(item, index) in hospitalList"
            :key="index"
            :info="item"
            :index="index"
          ></SearchHospital>
        </van-list>
      </div>
    </div>
    <!-- 热门医院 end -->

    <!-- 热门医生 开始 -->
    <div class="hot_list" v-show="menuActive == 2">
      <div class="head">热门医生</div>
      <div class="list_box">
        <van-list
          v-model="dloading"
          :finished="dfinished"
          finished-text="没有更多了"
          :offset="30"
          @load="loadDoctorMore"
        >
          <SearchDoctor
            class="cell"
            v-for="(item, index) in doctorList"
            :key="index"
            :info="item"
            :index="index"
          ></SearchDoctor>
        </van-list>
      </div>
    </div>
    <!-- 热门医生 end -->

    <!-- 热门材料 开始 -->
    <div class="hot_list" v-show="menuActive == 3">
      <div class="head">热门材料</div>
      <div class="list_box">
        <van-list
          v-model="mloading"
          :finished="mfinished"
          finished-text="没有更多了"
          :offset="30"
          @load="loadMaterialMore"
        >
          <SearchMaterial
            class="cell"
            v-for="(item, index) in materialList"
            :key="index"
            :info="item"
            :index="index"
          ></SearchMaterial>
        </van-list>
      </div>
    </div>
    <!-- 热门材料 end -->
  </div>
</template>
<script>
import TabMenus from "@/components/menus/index.vue";
import SearchHospital from "@/components/hospital/search_hospital.vue";
import SearchDoctor from "@/components/doctor/search_doctor.vue";
import SearchMaterial from "@/components/material/index.vue";
import {
  PLATFORM_TYPE,
  GET_QUALIFICATION_HOSPITAL_SEARCH,
  GET_QUALIFICATION_DOCTOR_SEARCH,
  GET_QUALIFICATION_MATERIAL_SEARCH,
  GET_KEYWORDS_OPTIONS,
  GET_SEO_SETTING_INFO,
} from "@/http/interface";
import { List } from "vant";
export default {
  components: {
    TabMenus,
    SearchHospital,
    SearchDoctor,
    SearchMaterial,
    [List.name]: List,
  },
  data() {
    return {
      menus: [
        { name: "医院资质", id: 1 },
        { name: "医生资质", id: 2 },
        { name: "材料品牌", id: 3 },
      ],
      menuActive: 1,
      hospitalList: [],
      doctorList: [],
      materialList: [],
      // title: "",
      // description: "",
      // keywords: "",
      term: "",
      hotList: [],
      placeholder: "输入你要查询的医院简称",
      seoInfo: {},
      totalElements: 0,
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 20,

      doctorTotalElements: 0,
      dloading: false,
      dfinished: false,
      dPageNumber: 1,

      materialTotalElements: 0,
      mloading: false,
      mfinished: false,
      mPageNumber: 1,
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/inquire/certification`}
      ]
    };
  },
  watchQuery: true,
  watch: {
    hospitalList: {
      handler: function (n) {
        this.hospitalList = n;
      },
      immediate: true,
    },
    doctorList: {
      handler: function (n) {
        this.doctorList = n;
      },
      immediate: true,
    },
    materialList: {
      handler: function (n) {
        this.materialList = n;
      },
      immediate: true,
    },
    hotList: {
      handler: function (n) {
        this.hotList = n;
      },
      immediate: true,
    },
  },
  async asyncData({ query, $axios }) {
    let hospitalList = [];
    let doctorList = [];
    let materialList = [];
    let oParams = { pageNumber: 1, pageSize: 20 };
    let params = { type: query.type || 1 };
    let placeholder = "输入你要查询的医院简称";

    let totalElements = 0;
    let doctorTotalElements = 0;
    let materialTotalElements = 0;

    if (!query.type || query.type == 1) {
    }
    switch (Number(query.type)) {
      case 2:
        placeholder = "输入你要查询的医生姓名";
        break;
      case 3:
      placeholder = "输入你要查询的材料名称";
        break;
      default:
        placeholder = "输入你要查询的医院简称";
        break;
    }

    // 医院资质
    // if (!query.type || query.type == 1) {
    let h = await $axios.get(GET_QUALIFICATION_HOSPITAL_SEARCH, {
      params: oParams,
    });
    let hres = h.data || {};
    hospitalList = hres.list || [];

    totalElements = hres.totalElements;
    // }

    // 医生资质
    // if (query.type == 2) {
    let d = await $axios.get(GET_QUALIFICATION_DOCTOR_SEARCH, {
      params: oParams,
    });
    let dres = d.data || {};
    doctorList = dres.list || [];
    console.log(doctorList);

    doctorTotalElements = dres.totalElements;
    // }

    // 材料资质
    // if (query.type == 3) {
    let m = await $axios.get(GET_QUALIFICATION_MATERIAL_SEARCH, {
      params: oParams,
    });
    let mres = m.data || {};
    materialList = mres.list || [];

    materialTotalElements = mres.totalElements;
    // }

    // 获取热门关键词
    let hot = await $axios.get(GET_KEYWORDS_OPTIONS, { params: params });
    let list = hot.data || [];
    if (list.length > 5) {
      list.length = 5;
    }
    console.log(hot);

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 5, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return {
      hospitalList,
      doctorList,
      materialList,
      menuActive: Number(query.type) || 1,
      hotList: list,
      placeholder,
      seoInfo,
      totalElements,
      doctorTotalElements,
      materialTotalElements,
    };
  },
  methods: {
    // 去搜索
    goSearch() {
      let term = this.term;
      // if (!term) {
      //   return false;
      // }
      //encodeURI 和 decodeURI
      let txt = encodeURI(term);
      console.log(txt);
      console.log(decodeURI(txt));
      this.$router.push({
        path: "/inquire/result",
        query: { term: txt, type: this.menuActive },
      });
    },

    // 监听菜单切换
    onChange(e) {
      let query = {};
      query.type = e;
      this.$router.replace({
        path: "/inquire/certification",
        query: query,
      });
    },

    // 点击关键词
    chooseTerm(row) {
      this.term = row.name;
      this.goSearch();
    },

    // // 获取参数
    // getParams() {
    //   let params = {};
    //   params.combinedId = this.combinedId;
    //   params.gender = this.gender;
    //   params.projectId = this.projectId;
    //   params.titleId = this.titleId;

    //   params.pageNumber = this.pageNumber;
    //   params.pageSize = this.pageSize;

    //   let city = this.$cookies.get("city");
    //   if (city && city != "全国") {
    //     params.city = city;
    //   }
    //   return params;
    // },

    // 医院触底加载
    loadHospitalMore() {
      let totalElements = this.totalElements;
      let list = this.hospitalList;
      let num = this.pageNumber;
      console.log(list.length + "----" + totalElements);
      // 判断是否还有下一页
      if (list.length < totalElements) {
        this.pageNumber = num + 1;
        this.getHospital();
      } else {
        this.finished = true;
      }
    },

    // 医生触底加载
    loadDoctorMore() {
      let totalElements = this.doctorTotalElements;
      let list = this.doctorList;
      let num = this.dpageNumber;
      console.log(list.length + "----" + totalElements);
      // 判断是否还有下一页
      if (list.length < totalElements) {
        this.dpageNumber = num + 1;
        this.getDoctor();
      } else {
        this.dfinished = true;
      }
    },

    // 材料触底加载
    loadMaterialMore() {
      let totalElements = this.materailElements;
      let list = this.materialList;
      let num = this.mPageNumber;
      console.log(list.length + "----" + totalElements);
      // 判断是否还有下一页
      if (list.length < totalElements) {
        this.mPageNumber = num + 1;
        this.getMaterial();
      } else {
        this.mfinished = true;
      }
    },

    // 获取医院列表
    async getHospital() {
      let oParams = {};
      oParams.pageNumber = this.pageNumber;
      oParams.pageSize = this.pageSize;
      let olist = this.hospitalList;
      this.loading = true;
      let res = await this.$axios.get(GET_QUALIFICATION_HOSPITAL_SEARCH, {
        params: oParams,
      });
      this.loading = false;
      if (res.code == 200) {
        let obj = res.data || {};
        let nList = obj.list || [];
        let n = olist.concat(nList);
        this.hospitalList = n;
      }
    },

    // 获取医生列表
    async getDoctor() {
      let oParams = {};
      oParams.pageNumber = this.dPageNumber;
      oParams.pageSize = this.pageSize;
      let olist = this.doctorList;
      this.dloading = true;
      let res = await this.$axios.get(GET_QUALIFICATION_DOCTOR_SEARCH, {
        params: oParams,
      });
      this.dloading = false;
      if (res.code == 200) {
        let obj = res.data || {};
        let nList = obj.list || [];
        let n = olist.concat(nList);
        this.doctorList = n;
      }
    },

    // 获取材料列表
    async getMaterial() {
      let oParams = {};
      oParams.pageNumber = this.mPageNumber;
      oParams.pageSize = this.pageSize;
      let olist = this.materialList;
      this.mloading = true;
      let res = await this.$axios.get(GET_QUALIFICATION_MATERIAL_SEARCH, {
        params: oParams,
      });
      this.mloading = false;
      if (res.code == 200) {
        let obj = res.data || {};
        let nList = obj.list || [];
        let n = olist.concat(nList);
        this.materialList = n;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/inquire/certification.less";
</style>